<template>
  <view class="success-container">
    <!-- 成功图标 -->
    <view class="success-icon">
      <text class="checkmark">✓</text>
    </view>

    <!-- 订单金额 -->
    <view class="order-amount"
      >提交成功，提现金额 ¥{{ payInfo.request_amount }}</view
    >
    <view class="order-rate"
      >扣除手续费 ¥{{
        bc(`${Number(payInfo.request_amount)}-${payInfo.amount_paid}`)
      }}</view
    >

    <!-- 查看订单按钮 -->
    <button class="view-order-btn" @tap="viewOrder">查看记录</button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { bc } from "@/utils/helper";
// 查看订单方法
const viewOrder = () => {
  uni.redirectTo({
    url: `/pagesShop/paymoney/index`,
  });
};
const payInfo = ref({
    request_amount: 0,
    amount_paid: 0
});
onLoad((options) => {
  // 页面加载时的逻辑
  payInfo.value = JSON.parse(options.payInfo);
});
</script>

<style lang="scss" scoped>
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx;
  min-height: 100vh;
  background-color: #fff;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #4cd964;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;

  .checkmark {
    color: #fff;
    font-size: 80rpx;
    line-height: 80rpx;
    font-weight: bold;
  }
}

.success-text {
  font-size: 34rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.order-amount {
  font-size: 16px;
  color: #43bd0d;
  margin-bottom: 20rpx;
  font-family: "Arial Normal", "Arial", sans-serif;
  font-weight: 400;
}
.order-rate {
  font-family: "Arial Normal", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #555555;
}

.view-order-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #0099ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  border: none;
  margin-top: 80rpx;
}

.back-home-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #fff;
  color: #333;
  border-radius: 8rpx;
  font-size: 32rpx;
  border: 1px solid #ddd;
}
</style>
